<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>运动会</title>

    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">

    <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <% include common/aside.ejs %>
      </el-aside>
      <el-container>
        <el-main>
          <h1><%= pageName %></h1>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-table
              :data="arranges"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >

              <el-table-column
                type="index"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.gameName"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.gameField"
                label="比赛场地"
                width="160"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.ready"
                label="检录"
                width="60"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.judgeName"
                label="裁判"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="gameInfo.time0"
                label="初赛日期"
                sortable>
              </el-table-column>
              <el-table-column
                prop="gameInfo.time1"
                label="决赛日期"
                sortable>
              </el-table-column>

              <el-table-column type="expand" label="分组">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="分组人数">
                      <span>{{ props.row.gameInfo.groupNum }}</span>
                    </el-form-item>
                    <el-form-item label="备注">
                      <span>{{ props.row.gameInfo.desc }}</span>
                    </el-form-item>
                  </el-form>
                  <div  class="innerTableWrap">
                    <div class="innerTableCard" v-for="(item, index) in props.row.arrangeGroup">
                      <h3>第{{index + 1}}组</h3>
                      <el-table
                        :data="item"
                        style="width: 300px">
                        <el-table-column
                          type="index"
                          label="赛道/序号"
                          width="90px"
                          align="center">
                        </el-table-column>
                        <el-table-column
                          prop="playerName"
                          label="姓名">
                        </el-table-column>
                        <el-table-column
                          prop="playerId"
                          label="号码">
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteOne(scope.row.gameInfo.gameId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      return {
        arranges: [],
        arrangeList: [],
        judgeList: []
      }
    },
    methods: {
      deleteOne(id) {
        let _this = this;
        console.log(id)
        axios.post('/delete', {
          target: "game",
          id
        })
          .then(function (response) {
            if (response.data.status === 200) {
              location.href = "/arrangeList"
            }
          })
          .catch(function (error) {
            console.log(error)
            _this.$alert('服务器错误，请稍后重试', {
              confirmButtonText: '确定',
              type: 'error'
            })
          });
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      getArrangeList() {
        return axios.get('/list/arrange');
      },
      getJudgeList() {
        return axios.get('/list/judge');
      },
      toArrangeList(response) {
        if (response.data.status === 200) {
          this.arrangeList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toJudgeList(response) {
        if (response.data.status === 200) {
          this.judgeList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      id2name(id) {
        let name = "";
        this.judgeList.forEach(e => {
          if (e.judgeId === id) {
            name = e.judgeName;
          }
        })
        return name;
      },
      toArranges() {
        let _this = this;

        this.arranges = this.arrangeList.map(e => {
          e.gameInfo.judgeName = _this.id2name(e.gameInfo.judgeId)
          e.gameInfo.ready = e.gameInfo.ready ? "是" : "否"
          e.gameInfo.desc = e.gameInfo.desc ?  e.gameInfo.desc : "无"
          return e
        })

        // console.log(this.arranges)
      }
    },
    created() {
      let _this = this;
      axios.all([_this.getArrangeList(), _this.getJudgeList()])
        .then(axios.spread(function (arrangeList, judgeList) {
          _this.toArrangeList(arrangeList);
          _this.toJudgeList(judgeList);
          _this.toArranges();
        }));
    }
  })
</script>
</body>
</html>
